<template>
  <!-- 货到付款申请弹窗 -->
  <el-dialog :title="
      detail.cash_delivery_status_name == '未通过' ? '货到付款审批' : title
    " :close-on-click-modal="false" :visible.sync="show" :before-close="closeDialog" width="40%" class="add">
    <el-form :model="deliveryInfo" size="mini" label-width="110px">
      <div v-if="
          detail.cash_delivery_status_name == '未通过' ||
            detail.cash_delivery_status_name == '已关闭'
        ">
        <div class="titleL">
          {{
            detail.cash_delivery_status_name == "未通过"
              ? "审核未通过"
              : detail.cash_delivery_status_name == "已关闭"
                ? "货到付款已关闭"
                : ""
          }}
        </div>
        <el-form-item label="原因：" prop="remark">
          <span>{{ detail.cash_delivery_status_name == "已关闭" ? detail.cash_delivery_close_remark : detail.cash_delivery_audit_remark }}</span>
        </el-form-item>
      </div>
      <div class="titleL">
        {{
          detail.cash_delivery_status_name == "未通过" ||
            detail.cash_delivery_status_name == "已关闭"
            ? "重新申请"
            : detail.cash_delivery_status_name == "已通过"
              ? "关闭内容"
              : "申请内容"
        }}
      </div>
      <el-form-item :label="
          detail.cash_delivery_status_name == '已通过'
            ? '关闭原因：'
            : '申请原因：'
        " prop="remark">
        <el-input v-if="
            detail.cash_delivery_status_name == '未开通' ||
              detail.cash_delivery_status_name == '未通过' ||
              detail.cash_delivery_status_name == '已关闭' ||
              detail.cash_delivery_status_name == '已通过'
          " v-model="deliveryInfo.inputApply" class="mb20" type="textarea" placeholder="请输入申请原因" />
        <span v-else>{{ detail.cash_delivery_apply_remark }}</span>
      </el-form-item>
      <el-form-item v-if="detail.cash_delivery_status_name != '已通过'" label="申请凭证：" prop="remark">
        <div v-if="title == '货到付款审批'" class="flex_image">
          <div v-for="(item, index) in detail.cash_delivery_apply_image" :key="index" class="image_box">
            <img :src="item.url" alt="">
          </div>
        </div>
        <img-upload v-if="
            detail.cash_delivery_status_name == '未开通' ||
              detail.cash_delivery_status_name == '未通过' ||
              detail.cash_delivery_status_name == '已关闭'
          " ref="uploader" @setUrl="getImgUrl" />
      </el-form-item>
      <div v-if="title == '货到付款审批'">
        <div class="titleL">审批</div>
        <el-form-item label="是否通过：" prop="remark">
          <el-radio-group v-model="deliveryInfo.resource">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="deliveryInfo.resource == 3" label="拒绝原因：">
          <el-input v-model="deliveryInfo.inputApply" class="mb20" type="textarea" placeholder="请输入拒绝原因" />
        </el-form-item>
      </div>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="closeDialog">取 消</el-button>
      <el-button size="small" type="primary" @click="clickApplyPay">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import imgUpload from '@/components/Upload/imgUpload';
class DeliveryInfo {
  file_path = [];
  inputApply = '';
  resource = 2;
}

export default {
  name: 'Delivery',
  components: {
    imgUpload
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      inputApply: '', // 申请原因
      deliveryInfo: new DeliveryInfo(),
      detail: '',
      status: ''
    };
  },
  methods: {
    // 打开弹框初始化
    openDrawer (detail, status) {
      console.log(detail);
      this.detail = detail;
      this.status = status;
      this.deliveryInfo = new DeliveryInfo();
    },
    // 申请货到付款确定
    clickApplyPay () {
      this.$emit('clickApplyPay', this.deliveryInfo, this.status);
    },
    // 关闭申请货到付款弹框
    closeDialog () {
      this.deliveryInfo = new DeliveryInfo();
      this.$emit('closeDelivery');
    },
    // 图片
    getImgUrl ({ url }) {
      this.deliveryInfo.file_path = url.map((val) => val.relativeUrl);
    }
  }
};
</script>

<style lang="scss" scoped>
.add {
  background: #f5f6f9;
  // .input {
  //   width: 100%;
  // }
  // .el-form-item {
  //   margin-bottom: 10px;
  //   ::v-deep.el-form-item__label {
  //     padding-bottom: 0;
  //   }
  // }
  // ::v-deep.el-dialog {
  //   height: calc(100vh - 80px);
  //   overflow-y: auto;
  // }
  // ::v-deep.el-dialog__body {
  //   padding: 10px 20px;
  // }
  // ::v-deep.el-radio {
  //   margin-bottom: 15px;
  // }
}
.flex_image {
  display: flex;
  flex-wrap: wrap;
}
.image_box {
  width: 98px;
  height: 98px;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 8px 8px 0;
  img {
    width: 100%;
    height: 100%;
    display: inline-block;
  }
}
</style>
